import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { Form, Icon, Input, Button, message } from 'antd';
import styles from './login.less';
import { loginCheck } from '../../services/auth';
import store from '../../utils/store';
import func from '../../utils/index';
import router from 'umi/router';
import { USER_KEY, REDIRECT_KEY } from '../../utils/const';
import { Base64 } from 'js-base64';
const Item = Form.Item;

/*
登陆的路由组件
 */
class Login extends Component {
  changeToRedirect = () => {
    const urlParams = new URL(window.location.href);
    const params = func.getPageQuery();
    let redirect = params[REDIRECT_KEY];
    if (redirect) {
      redirect = Base64.decode(redirect);
      const redirectUrlParams = new URL(redirect);
      if (redirectUrlParams.origin === urlParams.origin) {
        redirect = redirect.substr(urlParams.origin.length);
        if (redirect.match(/^\/.*#/)) {
          redirect = redirect.substr(redirect.indexOf('#') + 1);
        }
      } else {
        window.location.href = redirect;
        return;
      }
    }

    const routeDate = {
      pathname: redirect || '/',
    };
    router.push(routeDate);
  };

  handleSubmit = event => {
    // 阻止事件的默认行为
    event.preventDefault();

    // 对所有表单字段进行检验
    this.props.form.validateFields(async (err, values) => {
      // 检验成功
      if (!err) {
        const { username, password } = values;
        const result = await loginCheck({ username, password }); // {status: 0, data: user}  {status: 1, msg: 'xxx'}
        if (result.success) {
          // 提示登陆成功
          message.success('登陆成功');
          // 保存user
          store.save(USER_KEY, result.results);
          // 跳转到管理界面 (不需要再回退回到登陆)
          this.changeToRedirect();
        } else {
          message.error(result.msg);
        }
      } else {
        console.log('检验失败!');
      }
    });
  };

  /*
   用户名/密码的的合法性要求
     1). 必须输入
     2). 必须大于等于4位
     3). 必须小于等于12位
     4). 必须是英文、数字或下划线组成
    */
  validatePwd = (rule, value, callback) => {
    if (!value) {
      callback('密码必须输入');
    } else if (value.length < 4) {
      callback('密码长度不能小于4位');
    } else if (value.length > 12) {
      callback('密码长度不能大于12位');
    } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
      callback('密码必须是英文、数字或下划线组成');
    } else {
      callback(); // 验证通过
    }
  };

  render() {
    // 如果用户已经登陆, 自动跳转到管理界面
    const user = store.get(USER_KEY);
    if (user && user._id) {
      return <Redirect to="/" />;
    }

    // 得到具强大功能的form对象
    const form = this.props.form;
    const { getFieldDecorator } = form;

    return (
      <div className={styles.login}>
        <header className={styles.loginHeader}></header>
        <section className={styles.loginContent}>
          <h2>用户登陆</h2>
          <Form onSubmit={this.handleSubmit} className="loginForm">
            <Item>
              {/*
              用户名/密码的的合法性要求
                1). 必须输入
                2). 必须大于等于4位
                3). 必须小于等于12位
                4). 必须是英文、数字或下划线组成
               */}
              {getFieldDecorator('username', {
                // 配置对象: 属性名是特定的一些名称
                // 声明式验证: 直接使用别人定义好的验证规则进行验证
                rules: [
                  { required: true, whitespace: true, message: '用户名必须输入' },
                  { min: 4, message: '用户名至少4位' },
                  { max: 18, message: '用户名最多18位' },
                  { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' },
                ],
                initialValue: 'admin', // 初始值
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="用户名"
                />,
              )}
            </Item>
            <Form.Item>
              {getFieldDecorator('password', {
                rules: [
                  {
                    validator: this.validatePwd,
                  },
                ],
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="password"
                  placeholder="密码"
                />,
              )}
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="loginFormButton" block>
                登陆
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    );
  }
}

const LoginPage = Form.create()(Login);
export default LoginPage;
